<template>
  <div class="app-container">
    <el-button @click="showDialog">打开对话框</el-button>
    <CustomDialog ref="dialogRef" draggable :dialogHeight="'85vh'" :dialog-config="dialogConfig">
      <div>e4343434</div>
      fdsgfdgdf
      <template #footer>
        <el-button @click="onCustomCancel">关闭</el-button>
        <el-button @click="onCustomConfirm">提交</el-button>
      </template>
    </CustomDialog>
  </div>
</template>
<script>
export default {
  setup() {
    const dialogRef = ref(null)

    // 配置对话框的回调
    const dialogConfig = {
      handleCancel: () => Promise.resolve(),
      handleConfirm: () => {
        return new Promise(reject => {
          setTimeout(() => {
            reject(5)
          }, 5000)
        })
          .then(res => {
            console.log('res11111: ', res)
          })
          .catch(error => {
            throw error
          })
          .finally(() => {
            console.log('fina')
          })
      },
      confirmProps: { type: 'primary' },
      cancelProps: { type: 'danger' },
      dialogTitle: '自定义标题'
    }

    // 打开对话框
    const showDialog = () => {
      if (dialogRef.value) {
        dialogRef.value.openDialog()
      }
    }

    // 自定义取消事件
    const onCustomCancel = () => {
      console.log('自定义取消')
      dialogRef.value.closeDialog()
    }

    // 自定义确认事件
    const onCustomConfirm = () => {
      console.log('自定义确认')
      dialogRef.value.closeDialog()
    }

    return {
      dialogRef,
      dialogConfig,
      showDialog,
      onCustomCancel,
      onCustomConfirm
    }
  }
}
</script>
